if (!window.anthill.layout) anthill.layout = {};

anthill.layout.Tabs = function (container, callback) {
	this.container = container;
	this.callback = callback;
};

anthill.layout.Tabs.prototype.draw = function (options) {
	/*
	options.tabs = ['hola', 'como', 'estas', '?'];
	<div id='container'>
	  <div id='container_tabs' class='anthill_tabs'>
		<ul class='anthill_tabs_lst'>
			<li name='container_0' class="anthill_tabs_lst_selected">hola</li>
			<li name='container_1'>como</li>
			<li name='container_2'>estas</li>
			<li name='container_3'>?</li>
		</ul>
		<div id='container_tabs_cnt' class='anthill_tabs_container'>
			<div id='container_0' class='anthill_tab anthill_tab_selected'/>
			<div id='container_1' class='anthill_tab'/>
			<div id='container_2' class='anthill_tab'/>
			<div id='container_3' class='anthill_tab'/>
		</div>
	   </div>
	</div>
	*/
	this.options = (options)?options:{};
	this.container.innerHTML = '';
	
	var html = document.createElement('div');
	this.container.appendChild(html);

	var ult = null;
	var ulb = null;
	var ull = null;
	var ulr = null;
	
//	var ul = document.createElement('ul');
//	html.appendChild(ul);
	
	var cont = document.createElement('div');
	html.appendChild(cont);

	html.setAttribute('class', 'anthill_tabs');
	
	cont.setAttribute('class', 'anthill_tabs_container');
	cont.setAttribute('id', this.container.id+'_tabs');

	if(this.options.colors && (this.options.colors.selected || this.options.colors.normal) && !this.options.colors.bg) {
		this.options.colors.bg = {};
		if(this.options.colors.selected) this.options.colors.bg.selected = this.options.colors.selected;
		if(this.options.colors.normal)this.options.colors.bg.normal = this.options.colors.normal;
	}

	if(this.options.colors && !this.options.colors.fg && this.options.colors.bg) {
		this.options.colors.fg = {};
		if(this.options.colors.bg.selected) this.options.colors.fg.selected = anthill.getContrastColor(this.options.colors.bg.selected);
		if(this.options.colors.bg.normal) this.options.colors.fg.normal = anthill.getContrastColor(this.options.colors.bg.normal);
	}

	if(this.options.colors && this.options.colors.fg && this.options.colors.bg.selected) {
		cont.style.borderColor = this.options.colors.bg.selected;
	}

	var selindex = (this.options.active && typeof this.options.active == 'number' && this.options.active >= 0 && this.options.tabs && this.options.tabs.length > this.options.active)?this.options.active:0;

	var liClick = function() {
		if(!this.className.match(/^.*\Wanthill_tabs_lst_selected\W.*$/)) {
			var nodesSnapshot = document.evaluate('child::ul/child::li[attribute::class="anthill_tabs_lst_selected"]', this.parentNode.parentNode, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null );

			for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ )
			{
				var oldsel = nodesSnapshot.snapshotItem(i).getAttribute('name');
				nodesSnapshot.snapshotItem(i).setAttribute('class','');
				if(this.colors && this.colors.bg.normal) {
					var divs = nodesSnapshot.snapshotItem(i).getElementsByTagName('div');
					for(var j=0; j<divs.length; j++) {
						divs[j].style.backgroundColor = this.colors.bg.normal;
						divs[j].style.color = this.colors.fg.normal;
					}
				}
			}
			
			var nodesSnapshot = document.evaluate('descendant::li[attribute::name="'+this.getAttribute('name')+'"]', this.parentNode.parentNode, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null );

			for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ )
			{
				nodesSnapshot.snapshotItem(i).setAttribute('class','anthill_tabs_lst_selected');
				if(this.colors && this.colors.bg.selected) {
					var divs = nodesSnapshot.snapshotItem(i).getElementsByTagName('div');
					for(var j=0; j<divs.length; j++) {
						divs[j].style.backgroundColor = this.colors.bg.selected;
						divs[j].style.color = this.colors.fg.selected;
					}
				}
			}

			nodesSnapshot = document.evaluate('child::div[attribute::id="'+oldsel+'"]', cont, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null );
			for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ )
			{
				nodesSnapshot.snapshotItem(i).setAttribute('class','anthill_tab');
			}
			nodesSnapshot = document.evaluate('child::div[attribute::id="'+this.getAttribute('name')+'"]', cont, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null );
			for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ )
			{
				nodesSnapshot.snapshotItem(i).setAttribute('class','anthill_tab  anthill_tab_selected');
			}
		}
	};

	for (var i in this.options.tabs) {
		if(!this.options.pos || this.options.pos.match(/.*t.*/)) {
			if(!ult) {
				ult = document.createElement('ul');
				html.appendChild(ult)
				ult.setAttribute('class', 'anthill_tabs_lst anthill_tabs_lst_t');
				cont.setAttribute('style', 'top: 26px;'+cont.getAttribute('style'));
			}
			var li = document.createElement('li');
			li.setAttribute('name', this.container.id+'_'+i);
			if(this.options.colors) li.colors = this.options.colors;
			if(i == selindex) {
				li.setAttribute('class', 'anthill_tabs_lst_selected');
			}
			li.addEventListener('click', liClick, false);
			ult.appendChild(li);
			if(this.options.deco !== false)
				this.addTab(li, this.options.tabs[i], 't');
			else
				li.innerHTML=this.options.tabs[i];

			if(li.colors) {
				var divs = li.getElementsByTagName('div');
				for(var j=0; j<divs.length; j++) {
					if(i == selindex && li.colors.bg.selected) {
						divs[j].style.backgroundColor = li.colors.bg.selected;
						divs[j].style.color = li.colors.fg.selected;
					} else if(li.colors.bg.normal) {
						divs[j].style.backgroundColor = li.colors.bg.normal;
						divs[j].style.color = li.colors.fg.normal;
					}
				}
			}
		}
		if(this.options.pos && this.options.pos.match(/.*l.*/)) {
			if(!ull) {
				ull = document.createElement('ul');
				html.appendChild(ull)
				ull.setAttribute('class', 'anthill_tabs_lst anthill_tabs_lst_l');
				cont.setAttribute('style', 'left: 100px;'+cont.getAttribute('style'));
				if(ult) {
					ult.setAttribute('style', 'left:100px;'+ult.getAttribute('style'));
					ull.setAttribute('style', 'top: 26px;'+ull.getAttribute('style'));
				}
			}
			var li = document.createElement('li');
			li.setAttribute('name', this.container.id+'_'+i);
			if(i == selindex) {
				li.setAttribute('class', 'anthill_tabs_lst_selected');
			}
			if(this.options.colors) li.colors = this.options.colors;
			li.addEventListener('click', liClick, false);
			ull.appendChild(li);
			if(this.options.deco !== false)
				this.addTab(li, this.options.tabs[i], 'l');
			else
				li.innerHTML=this.options.tabs[i];

			if(li.colors) {
				var divs = li.getElementsByTagName('div');
				for(var j=0; j<divs.length; j++) {
					if(i == selindex && li.colors.bg.selected) {
						divs[j].style.backgroundColor = li.colors.bg.selected;
						divs[j].style.color = li.colors.fg.selected;
					} else if(li.colors.bg.normal) {
						divs[j].style.backgroundColor = li.colors.bg.normal;
						divs[j].style.color = li.colors.fg.normal;
					}
				}
			}
		}
		if(this.options.pos && this.options.pos.match(/.*b.*/)) {
			if(!ulb) {
				ulb = document.createElement('ul');
				html.appendChild(ulb)
				ulb.setAttribute('class', 'anthill_tabs_lst anthill_tabs_lst_b');
				cont.setAttribute('style', 'bottom: 26px;'+cont.getAttribute('style'));
				if(ull) {
					ulb.setAttribute('style', 'left:100px;'+ulb.getAttribute('style'));
					ull.setAttribute('style', 'bottom: 26px;'+ull.getAttribute('style'));
				}
			}
			var li = document.createElement('li');
			li.setAttribute('name', this.container.id+'_'+i);
			if(i == selindex) {
				li.setAttribute('class', 'anthill_tabs_lst_selected');
			}
			if(this.options.colors) li.colors = this.options.colors;
			li.addEventListener('click', liClick, false);
			ulb.appendChild(li);
			if(this.options.deco !== false)
				this.addTab(li, this.options.tabs[i], 'b');
			else
				li.innerHTML=this.options.tabs[i];

			if(li.colors) {
				var divs = li.getElementsByTagName('div');
				for(var j=0; j<divs.length; j++) {
					if(i == selindex && li.colors.bg.selected) {
						divs[j].style.backgroundColor = li.colors.bg.selected;
						divs[j].style.color = li.colors.fg.selected;
					} else if(li.colors.bg.normal) {
						divs[j].style.backgroundColor = li.colors.bg.normal;
						divs[j].style.color = li.colors.fg.normal;
					}
				}
			}
		}
		if(this.options.pos && this.options.pos.match(/.*r.*/)) {
			if(!ulr) {
				ulr = document.createElement('ul');
				html.appendChild(ulr)
				ulr.setAttribute('class', 'anthill_tabs_lst anthill_tabs_lst_r');
				cont.setAttribute('style', 'right: 100px;'+cont.getAttribute('style'));
				if(ulb) {
					ulb.setAttribute('style', 'right:100px;'+ulb.getAttribute('style'));
					ulr.setAttribute('style', 'bottom: 26px;'+ulr.getAttribute('style'));
				}
				if(ult) {
					ult.setAttribute('style', 'right:100px;'+ult.getAttribute('style'));
					ulr.setAttribute('style', 'top: 26px;'+ulr.getAttribute('style'));
				}
			}
			var li = document.createElement('li');
			li.setAttribute('name', this.container.id+'_'+i);
			if(i == selindex) {
				li.setAttribute('class', 'anthill_tabs_lst_selected');
			}
			if(this.options.colors) li.colors = this.options.colors;
			li.addEventListener('click', liClick, false);
			ulr.appendChild(li);
			if(this.options.deco !== false)
				this.addTab(li, this.options.tabs[i], 'r');
			else
				li.innerHTML=this.options.tabs[i];

			if(li.colors) {
				var divs = li.getElementsByTagName('div');
				for(var j=0; j<divs.length; j++) {
					if(i == selindex && li.colors.bg.selected) {
						divs[j].style.backgroundColor = li.colors.bg.selected;
						divs[j].style.color = li.colors.fg.selected;
					} else if(li.colors.bg.normal) {
						divs[j].style.backgroundColor = li.colors.bg.normal;
						divs[j].style.color = li.colors.fg.normal;
					}
				}
			}
		}
		var tab = document.createElement('div');
		cont.appendChild(tab);

		var tabclass = 'anthill_tab';
		if(i == selindex) {
			tabclass += ' anthill_tab_selected';
		}
		tab.setAttribute('class', tabclass);
		tab.setAttribute('id', this.container.id+'_'+i);
	}

	this.callback();
};



anthill.layout.Tabs.prototype.addTab = function (li, val, pos, ord) {
	/*var lidiv0 = document.createElement('div');*/
	var lidiv1 = document.createElement('div');
	var lidiv2 = document.createElement('div');
	var lidiv3 = document.createElement('div');
	var lidiv4 = document.createElement('div');
	lidiv4.innerHTML = val;

	var p = (pos=='t' ||pos=='b')?'h':pos;

	/*lidiv0.setAttribute('class', p+'0');*/
	lidiv1.setAttribute('class', p+'1');
	lidiv2.setAttribute('class', p+'2');
	lidiv3.setAttribute('class', p+'3');
	lidiv4.setAttribute('class', p+'4');
	if(pos == 't') {
		//li.appendChild(lidiv0);
		li.appendChild(lidiv1);
		li.appendChild(lidiv2);
		li.appendChild(lidiv3);
		li.appendChild(lidiv4);
	} else if (pos=='b'){
		li.appendChild(lidiv4);
		li.appendChild(lidiv3);
		li.appendChild(lidiv2);
		li.appendChild(lidiv1);
		//li.appendChild(lidiv0);
	} else {
		//li.appendChild(lidiv0);
		li.appendChild(lidiv1);
		li.appendChild(lidiv2);
		li.appendChild(lidiv3);
		li.appendChild(lidiv4);
		li.appendChild(lidiv3.cloneNode(true));
		li.appendChild(lidiv2.cloneNode(true));
		li.appendChild(lidiv1.cloneNode(true));
		//li.appendChild(lidiv0.cloneNode(true));
	}

};